

This project is part of the
@thi.ng/umbrella monorepo.
About
Data structures for managing & working with strided, memory mapped vectors.
This still package provides several data structures for managing &
working with memory mapped vectors. Together with
@thi.ng/vectors,
these structures enable high-level, zero-copy* manipulation
of the underlying memory region and are largely intended for WebGL &
WASM use cases, e.g. to provide JS friendly views of a structured data
region of a WebGL or WASM memory buffer.
* The only copying taking place is to GPU memory
Status
ALPHA - bleeding edge / work-in-progress
Search or submit any issues for this package
This package might be merged with and/or superseded by
@thi.ng/ecs
/
@thi.ng/soa.
Related packages
- @thi.ng/ecs - Entity Component System based around typed arrays & sparse sets
- @thi.ng/malloc - ArrayBuffer based malloc() impl for hybrid JS/WASM use cases, based on thi.ng/tinyalloc
- @thi.ng/soa - SOA & AOS memory mapped structured views with optional & extensible serialization
- @thi.ng/unionstruct - C-style struct, union and bitfield read/write views of ArrayBuffers
- @thi.ng/vectors - Optimized 2d/3d/4d and arbitrary length vector operations
- @thi.ng/webgl - WebGL & GLSL abstraction layer
Installation
yarn add @thi.ng/vector-pools
// ES module
<script type="module" src="https://unpkg.com/@thi.ng/vector-pools?module" crossorigin></script>
// UMD
<script src="https://unpkg.com/@thi.ng/vector-pools/lib/index.umd.js" crossorigin></script>
Package sizes (gzipped, pre-treeshake): ESM: 3.07 KB / CJS: 3.14 KB / UMD: 3.22 KB
Dependencies
Usage examples
Several demos in this repo's
/examples
directory are using this package.
A selection:
Screenshot | Description | Live demo | Source |
---|
 | WebGL MSDF text rendering & particle system | Demo | Source |
API
Generated API docs
WebGL geometry definition / manipulation
import { AttribPool, GLType } from "@thi.ng/vector-pools";
import * as v from "@thi.ng/vectors";
import * as tx from "@thi.ng/transducers";
const geo = new AttribPool({
mem: { size: 0x200 },
num: 4,
attribs: {
pos: { type: GLType.F32, size: 3, byteOffset: 0 },
uv: { type: GLType.F32, size: 2, byteOffset: 12 },
col: { type: GLType.F32, size: 3, default: [1, 1, 1], byteOffset: 20 },
id: { type: GLType.U16, size: 1, byteOffset: 32 }
}
});
geo.byteStride
geo.setAttribs({
pos: { data: [[-5, 0, 0], [5, 0, 0], [5, 5, 0], [-5, 5, 0]]},
uv: { data: [[0, 0], [1, 0], [1, 1], [0, 1]] }
});
geo.setAttribValues("id", [0, 1, 2, 3]);
geo.attribValue("pos", 3)
v.mulN(null, geo.attribValue("pos", 3), 2);
[...geo.attribValues("pos")]
tx.run(
tx.map(([pos, col]) => v.maddN(col, [0.5, 0.5, 0.5], v.normalize(col, pos), 0.5)),
tx.zip(geo.attribValues("pos"), geo.attribValues("col"))
);
[...geo.attribValues("col")]
geo.addAttribs({
normal: { type: GLType.F32, size: 3, default: [0, 0, 1], byteOffset: 36 }
});
geo.byteStride
const gl = ...
buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, geo.bytes(), gl.STATIC_DRAW);
const initAttrib = (gl, loc, attrib) => {
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(
loc,
attrib.size,
attrib.type,
false,
attrib.byteStride,
attrib.byteOffset
);
};
initAttrib(gl, attribLocPosition, geo.specs.pos);
initAttrib(gl, attribLocNormal, geo.specs.normal);
initAttrib(gl, attribLocUV, geo.specs.uv);
WASM interop
#include <emscripten.h>
#include <stdint.h>
typedef struct {
float pos[3];
float uv[2];
float col[3];
uint16_t id;
} Vertex;
Vertex vertices[] = {
{.pos = {-5, 0, 0}, .uv = {0, 0}, .col = {1, 0, 0}, .id = 0},
{.pos = {5, 0, 0}, .uv = {1, 0}, .col = {0, 1, 0}, .id = 1},
{.pos = {5, 5, 0}, .uv = {1, 1}, .col = {0, 0, 1}, .id = 2},
{.pos = {-5, 5, 0}, .uv = {0, 1}, .col = {1, 0, 1}, .id = 3},
};
int main() { return 0; }
EMSCRIPTEN_KEEPALIVE Vertex* getVertices() {
return vertices;
}
EMSCRIPTEN_KEEPALIVE int getNumVertices() {
return sizeof(vertices) / sizeof(Vertex);
}
import { Type } from "@thi.ng/api";
const Module = ...
const geo = new vp.AttribPool(
Module.buffer,
Module._getNumVertices(),
{
pos: { type: Type.F32, size: 3, byteOffset: 0 },
uv: { type: Type.F32, size: 2, byteOffset: 12 },
col: { type: Type.F32, size: 3, byteOffset: 20 },
id: { type: Type.U16, size: 1, byteOffset: 32 }
},
{
resizable: false,
mempool: {
start: Module._getVertices(),
}
}
);
[...geo.attribValues("pos")]
Authors
Karsten Schmidt
If this project contributes to an academic publication, please cite it as:
@misc{thing-vector-pools,
title = "@thi.ng/vector-pools",
author = "Karsten Schmidt",
note = "https://thi.ng/vector-pools",
year = 2018
}
License
© 2018 - 2021 Karsten Schmidt // Apache Software License 2.0